<template>
  <div>
    <div class="profit-list">
      <div class="nothing" v-if="list.length === 0">暂无奖励</div>
      <div class="card" v-for="(v, k) in list" :key="k">
        <div class="header">
          <div class="text">{{v.time}}</div>
          <div class="number red">{{v.amount}}元</div>
        </div>
        <div class="content">{{v.desc}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BonusList',
    data () {
      return {
        list: []
      }
    },
    methods: {
      getList () {
        this.$post('/vue/my/bonus_list').then(data => {
          this.list = data
        })
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);
  @c-yellow: rgb(245, 166, 35);

  .profit-list {
    background-color: #FFF;
    min-height: 100vh;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    .nothing {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 0;
      text-align: center;
      font-size: 12px;
      line-height: 24px;
      color: @c-124;
    }
    .card {
      margin-top: 8px;
      padding: 12px;
      background-color: #FFF;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
      .header {
        padding-bottom: 12px;
        border-bottom: 1px solid @c-235;
        display: flex;
        justify-content: space-between;
        .text {
          width: 50%;
          flex: 0 0 auto;
          font-size: 12px;
          line-height: 24px;
          color: @c-124;
          text-align: left;
        }
        .number {
          width: 50%;
          flex: 0 0 auto;
          font-size: 16px;
          line-height: 24px;
          text-align: right;
          &.red {
            color: @c-red;
          }
          &.blue {
            color: @c-blue;
          }
        }
      }
      .content {
        font-size: 12px;
        font-weight: bold;
        line-height: 24px;
        color: @c-124;
        padding-top: 12px;
        text-align: left;
      }
    }
  }
</style>